import React, { Component } from 'react'
import { toast, ToastContainer } from 'react-toastify'
import api from './../../serve/api'
import styles from './Register.module.scss'

export default class Register extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      eMail: '',
      userName: '',
      pwd: '',
      comfigPwd: '',
      message: '',
      roles: [],
      roleID: '',
      ttName: '',
      phone: '',
      prople: '',
      companyName: '',
      select: 0
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }


  componentDidMount() {
    this.getRoleList()
  }

  //提交
  handleSubmit(event) {
    console.log(this.state)
    event.preventDefault(); 
    if (this.state.roleID === '') {
      this.setState({
        message: '请选择用户类型'
      })
      return
    }
    if (this.state.pwd !== this.state.comfigPwd) {
      this.setState({
        message: '两次输入密码不一致'
      })
      return
    }
    this.registerRequest()
  }

  async getRoleList() {
    const data = await api.RoleFrontList({ flag: 1 })
    if (data && data.code === '000000') {
      this.setState({
        roles: data.result || [],
        roleID: data.result[0].id || ''
      })
    }
  }

  async registerRequest() {
    const params = {
      userName: this.state.userName,
      userPwd: this.state.pwd,
      email: this.state.eMail,
      userRoleId: this.state.roleID,
      organizationName: this.state.ttName,
      contactName: this.state.prople,
      companyName: this.state.companyName,
      realName: this.state.name
    }

    const data = await api.registerApi({
      ...params
    })
    if (data && data.code === '000000') {
      this.setState({
        message: '注册成功'
      })
      toast.success('注册成功!', {
        position: toast.POSITION.TOP_RIGHT
      });
      setTimeout(() => {
        this.props.history.goBack()
      }, 1500);
    } else {
      this.setState({
        message: (data && data.message) || ''
      })
    }
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  onSearchTypeClick =(item, index) => {
    let { roleID } = this.state;
    roleID = item.id
    this.setState({
      roleID,
      select: index,
      name: '',
      eMail: '',
      userName: '',
      pwd: '',
      comfigPwd: '',
      message: '',
      ttName: '',
      phone: '',
      prople: '',
      companyName: '',
    });
  }

  render() {
    const { roles, roleID, select } = this.state
    return (
      <div className={styles.register}>
        <div className={styles.title}>
          <span>注册</span>
        </div>
        <div className={styles.register_content}>
          <div className={styles.message}>{this.state.message}</div>
          <form className={styles.form} onSubmit={this.handleSubmit}>
            <div className={styles.form_item}>
              <span>用户类型 <em>*</em></span>
              <div className={styles.checkboxwrap}>
                {
                  roles.map((item, index) => {
                    return (
                      <a 
                        key={item.id} 
                        className={select === index ? styles.on : ''} 
                        onClick={() => this.onSearchTypeClick(item, index)}
                      >
                        <em></em>
                        <i>{item.role_name || ''}</i>
                      </a> 
                    )
                  })
                }
              </div>
            </div>
            {select === 2 && 
            <div className={styles.form_item}>
              <span>公司名称<em>*</em></span>
              <input
                name="companyName"
                required="required"
                value={this.state.companyName}
                type="text" 
                placeholder="请输入姓名" 
                onChange={this.handleInputChange}
              />
            </div>}
            {select === 1 &&
            <div className={styles.form_item}>
              <span>姓名<em>*</em></span>
              <input 
                name="name"
                required="required"
                value={this.state.name}
                type="text" 
                placeholder="请输入姓名" 
                onChange={this.handleInputChange}
              />
            </div>}
            {(select === 0 || select === 1) &&
              <div className={styles.form_item}>
              <span>机构名称<em>*</em></span>
              <input 
                name="ttName"
                required="required"
                value={this.state.ttName}
                type="text" 
                placeholder="请输入机构名称"
                onChange={this.handleInputChange}
              />
            </div>}
            {select !== 3 && 
            <div className={styles.form_item}>
              <span>联系电话<em>*</em></span>
              <input 
                title="请输入正确格式的联系方式"
                name="phone"
                required="required"
                value={this.state.phone}
                type="tel"
                pattern="^1(3|4|5|7|8)\d{9}$"
                placeholder="请输入联系电话" 
                onChange={this.handleInputChange}
              />
            </div>}
            {select !== 3 &&
            <div className={styles.form_item}>
              <span>联系人<em>*</em></span>
              <input 
                name="prople"
                required="required"
                value={this.state.prople}
                type="text" 
                placeholder="请输入姓名" 
                onChange={this.handleInputChange}
              />
            </div>}
            <div className={styles.form_item}>
              <span>邮箱<em>*</em></span>
              <input
                name="eMail"
                required="required"
                value={this.state.eMail}
                type="email"
                placeholder="请输入邮箱"
                onChange={this.handleInputChange}
              />
            </div>
            <div className={styles.form_item}>
              <span>用户名<em>*</em></span>
              <input 
                name="userName"
                required="required"
                value={this.state.userName}
                type="text" 
                placeholder="请输入用户名" 
                onChange={this.handleInputChange}
              />
            </div>
            <div className={styles.form_item}>
              <span>密码<em>*</em></span>
              <input 
                name="pwd" 
                required="required"
                value={this.state.pwd}
                type="password" 
                minLength={6}
                placeholder="请输入密码" 
                onChange={this.handleInputChange}
              />
            </div>
            <div className={styles.form_item}>
              <span>确认密码<em>*</em></span>
              <input 
                name="comfigPwd" 
                required="required"
                value={this.state.comfigPwd}
                type="password"
                minLength={6}
                placeholder="请确认密码"
                onChange={this.handleInputChange}
              />
            </div>
            <div className={styles.form_item}>
              <button type="submit">注册</button>
            </div>
          </form>
        </div>
        <ToastContainer />
      </div>
    )
  }
}
